import React, { useEffect, useState } from 'react';
import styles from './style.less';
import head_img from '@/img/head.png';
import { useParams } from 'umi';
import { Get_My_Book, Get_User_ById } from '@/services/api';
import { Menu, Timeline } from 'antd';
import TimeCard from './TimeCard/TimeCard';

function MyCenter() {
  const params = useParams<any>();
  const [id] = useState(params.id);
  const [userinfo, setUser] = useState({
    user_name: '',
    user_telephone: '',
    user_address: '',
    user_mailbox: '',
  });
  const [count, setCount] = useState(1);

  const [current, setCurrent] = useState('my_published');
  const [timelist, setTimeList] = useState([]);

  const [flag, setFlag] = useState(1);

  function handleClick(e: any) {
    setCurrent(e.key);
    console.log(current);
  }

  function getChildrenData(e: any) {
    setCurrent('my_published');
  }

  if (flag === 1) {
    try {
      Get_My_Book(id, current).then(res => {
        console.log(res);
        setTimeList(res);
        setFlag(0);
      });
    } catch (error) {
      console.log(error);
    }
  }

  useEffect(() => {
    try {
      Get_My_Book(id, current).then(res => {
        console.log(res);
        setTimeList(res);
      });
    } catch (error) {
      console.log(error);
    }
  }, [current]);

  if (count === 1) {
    try {
      Get_User_ById(id).then(res => {
        console.log(res);
        setCount(0);
        setUser(res);
      });
    } catch (error) {
      console.log(error);
    }
  }

  return (
    <div className={styles.outer}>
      <div className={styles.user}>
        <div className={styles.headblock}>
          <img src={head_img} alt="" />
        </div>
        <div className={styles.detailblock}>
          <h3 className={styles.username}>{userinfo.user_name}</h3>
          <div className={styles.details}>
            <div className={styles.detail}>
              <h3 className={styles.tellabel}>Tel:</h3>
              <p className={styles.tel}>{userinfo.user_telephone}</p>
            </div>

            <div className={styles.detail}>
              <h3 className={styles.addlabel}>地址:</h3>
              <p className={styles.address}>{userinfo.user_address}</p>
            </div>

            <div className={styles.detail}>
              <h3 className={styles.emaillabel}>E-mail:</h3>
              <p className={styles.email}>{userinfo.user_mailbox}</p>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.recordblock}>
        <div className={styles.listcontainer}>
          <Menu
            onClick={handleClick}
            selectedKeys={[current]}
            mode="horizontal"
          >
            <Menu.Item key="my_published">我发布的</Menu.Item>
            <Menu.Item key="my_trading">正在交易</Menu.Item>
            <Menu.Item key="my_sold">历史卖出</Menu.Item>
            <Menu.Item key="my_waiting">待收货的</Menu.Item>
            <Menu.Item key="my_bought">历史购买</Menu.Item>
          </Menu>
          <div className={styles.times}>
            <Timeline>
              {timelist.map(item => (
                <Timeline.Item>
                  <TimeCard
                    source={item}
                    cardType={current}
                    getChildrenData={getChildrenData}
                  />
                </Timeline.Item>
              ))}
            </Timeline>
          </div>
        </div>
      </div>
    </div>
  );
}

// function Padding() {
//   const [current, setCurrent] = useState('my_published');
//   const [timelist, setTimeList] = useState([]);

//   const params = useParams<any>();
//   const [id] = useState(params.id);

//   const [flag, setFlag] = useState(1);

//   function handleClick(e: any) {
//     setCurrent(e.key);
//     console.log(current);
//   }

//   if (flag === 1) {
//     try {
//       Get_My_Book(id, current).then(res => {
//         console.log(res);
//         setTimeList(timelist);
//         setFlag(0);
//       });
//     } catch (error) {
//       console.log(error);
//     }
//   }

//   useEffect(() => {
//     try {
//       Get_My_Book(id, current).then(res => {
//         console.log(res);
//         setTimeList(timelist);
//       });
//     } catch (error) {
//       console.log(error);
//     }
//   }, [current]);

//   let timeline = timelist.map(item => (
//     <Timeline.Item>
//       <TimeCard source={item} />
//     </Timeline.Item>
//   ));

//   useEffect(() => {
//     timeline = timelist.map(item => (
//       <Timeline.Item>
//         <TimeCard source={item} />
//       </Timeline.Item>
//     ));
//   }, [timelist]);

//   return (
//     <div className={styles.listcontainer}>
//       <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal">
//         <Menu.Item key="my_published">我发布的</Menu.Item>
//         <Menu.Item key="my_trading">正在交易</Menu.Item>
//         <Menu.Item key="my_sold">历史卖出</Menu.Item>
//         <Menu.Item key="my_waiting">待收货的</Menu.Item>
//         <Menu.Item key="my_bought">历史购买</Menu.Item>
//       </Menu>
//       <div className={styles.times}>
//         <Timeline>{timeline}</Timeline>
//       </div>
//     </div>
//   );
// }

export default MyCenter;
